<template>
  <div class="space-y-6">
    <!-- 搜索和筛选 -->
    <div class="bg-white p-6 rounded-lg shadow-sm">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2"
            >姓名</label
          >
          <InputText
            v-model="searchForm.realName"
            placeholder="请输入"
            class="w-full"
          />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2"
            >手机号</label
          >
          <InputText
            v-model="searchForm.phone"
            placeholder="请输入"
            class="w-full"
          />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2"
            >城市</label
          >
          <InputText
            v-model="searchForm.city"
            placeholder="请输入"
            class="w-full"
          />
        </div>

        <div class="flex items-end">
          <Button
            label="搜索"
            icon="pi pi-search"
            @click="searchUsers"
            class="mr-2"
          />
          <Button
            label="重置"
            icon="pi pi-refresh"
            severity="secondary"
            @click="resetSearch"
          />
        </div>
      </div>
    </div>
    <!-- 用户列表 -->
    <div class="bg-white rounded-lg shadow-sm p-6 h-[calc(100vh-254px)]">
      <DataTable
        :value="users"
        :loading="loading"
        :paginator="true"
        :rows="10"
        :totalRecords="totalRecords"
        :lazy="true"
        @page="onPageChange"
        class="p-0"
        stripedRows
        :scrollHeight="scrollHeight"
      >
        <Column field="username" header="用户名" style="width: 120px"></Column>
        <Column field="realName" header="姓名" style="width: 100px"></Column>
        <Column field="gender" header="性别" style="width: 80px">
          <template #body="{ data }">
            {{ data.gender === 0 ? "未知" : data.gender === 1 ? "男" : "女" }}
          </template>
        </Column>
        <Column field="phone" header="手机号" style="width: 150px"></Column>
        <Column field="age" header="年龄" style="width: 80px"></Column>
        <Column field="city" header="城市" style="width: 120px"> </Column>
        <Column field="createTime" header="创建时间" style="width: 180px">
          <template #body="{ data }">
            {{ formatDate(data.createTime) }}
          </template>
        </Column>
      </DataTable>
    </div>

  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { userApi } from "@/api/user.js";
import { useToast } from "primevue/usetoast";

// PrimeVue 组件
import Button from "primevue/button";
import InputText from "primevue/inputtext";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import { useWindowSize } from '@vueuse/core'

const toast = useToast();

// 响应式数据
const loading = ref(false);
const users = ref([]);
const totalRecords = ref(0);

const { height } = useWindowSize()

const scrollHeight = computed(() => {
  return `${height.value - 354}px`
})

// 搜索表单
const searchForm = reactive({
  realName: "",
  phone: "",
  city: "",
  pageNum: 1,
  pageSize: 10,
});

// 获取用户列表
const getUsers = async () => {
  loading.value = true;
  try {
    const response = await userApi.getUserPage(searchForm);
    if (response.success) {
      users.value = response.data.records || [];
      totalRecords.value = response.data.total || 0;
    }
  } catch (error) {
    toast.add({
      severity: "error",
      summary: "错误",
      detail: "获取用户列表失败",
      life: 3000,
    });
  } finally {
    loading.value = false;
  }
};

// 搜索用户
const searchUsers = () => {
  searchForm.pageNum = 1;
  getUsers();
};

// 重置搜索
const resetSearch = () => {
  Object.assign(searchForm, {
    realName: "",
    phone: "",
    city: "",
    pageNum: 1,
    pageSize: 10,
  });
  getUsers();
};

// 分页变化
const onPageChange = (event) => {
  searchForm.pageNum = event.page + 1;
  searchForm.pageSize = event.rows;
  getUsers();
};

// 格式化日期
const formatDate = (date) => {
  if (!date) return "-";
  return new Date(date).toLocaleString("zh-CN");
};

// 组件挂载时获取数据
onMounted(() => {
  getUsers();
});
</script>

<style scoped>
/* 自定义样式 */
</style>
